/**
 * 路由
 */
const ${aggregate.name} = () =>
    import ('@view/${domain.system}/${domain.name}/${aggregate.name}');

export default {
    path: '/${domain.system}',
    name: '${domain.system}',
    redirect: '/${domain.system}/${domain.name}/${aggregate.name}',
    meta: {
        title: 'xx子系统'
    },
    component: Main,
    children: [{
        path: '/${domain.system}/${domain.name}',
        name: '${domain.name}',
        redirect: '/${domain.system}/${domain.name}/${aggregate.name}',
        meta: {
            title: '<#if domain.desc??>${domain.desc}<#else>xx领域</#if>'
        },
        component: Body,
        children: [{
            path: '/${domain.system}/${domain.name}/${aggregate.name}',
            name: '${aggregate.name}',
            meta: {
                title: '${aggregate.desc}',
                notCache: true
            },
            component: ${aggregate.name}
        }]
    }]
}

/**
 * xx01 查询出<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>列表
 */
export const remote${aggregate.largeCamelName}QueryList = (params) => {
  return jsonPostRequest('/${domain.system}/${domain.name}/${aggregate.name}/query_list', params)
}

/**
 * xx02 下载<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>excel文件
 */
export const remote${aggregate.largeCamelName}DownloadFile = (params) => {
  return jsonPostRequest('/${domain.system}/${domain.name}/${aggregate.name}/download_file', params)
}

<style lang="less">
@import "./${aggregate.name}.less";
</style>

<template>
  <page
    :mainName="mainName"
    :selectedTab="selectedTab"
    :tabs="tabs"
    v-on:tabClose="tabClose"
    v-on:tabClick="tabClick"
    class="es-list-fund-account">
    <template v-slot:content>
      <div ref="tableTop" class="es-table-top">
<#if (aggregate.searchFields?size>0)>
        <div class="es-list-search-advance">
          <Form :model="${aggregate.camelName}Query.form" inline ref="${aggregate.camelName}QueryForm">
            <Row>
<#list aggregate.searchFields as field>
<#if field.extend==false>
              <i-col span="3">
                <FormItem prop="${field.camelName}">
<#if field.type=='date'>
                  <Date-picker
                    type="date"
                    v-model="${aggregate.camelName}Query.form.${field.camelName}"
                    clearable
                    placeholder="${field.desc}"
                  ></Date-picker>
<#elseif field.name?contains('type') && field.name?contains('status')>
                  <Select placeholder="${field.desc}" v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable>
                    <Option value="1">xxx</Option>
                    <Option value="2">xxx</Option>
                  </Select>
<#elseif field.name?contains('is_')>
                  <div class="ivu-input ivu-input-checkbox">
                    <Checkbox
                      size="large"
                      v-model="${aggregate.camelName}Query.form.${field.camelName}"
                      :true-value="1"
                      :false-value="0"
                    >${field.desc}</Checkbox>
                  </div>
<#else>
                  <Input v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable placeholder="${field.desc}"></Input>	
</#if>
                </FormItem>
              </i-col>
</#if>
</#list>
              <i-col span="6" class="es-btn-group">
                <Tooltip content="重置搜索条件" placement="top" :transfer="true">
                  <Button type="text" @click="clear${aggregate.largeCamelName}QueryForm">
                    <Icon type="md-refresh"/>
                  </Button>
                </Tooltip>
                <Button type="primary" @click="search${aggregate.largeCamelName}">搜索</Button>
                <Button type="text" class="es-btn-advance" @click="chang${aggregate.largeCamelName}Query1Drop">
                  {{${aggregate.camelName}Query.drop ? "精简检索" : "高级检索"}}
                  <Icon :type="${aggregate.camelName}Query.drop ? 'ios-arrow-up' : 'ios-arrow-down'"/>
                </Button>
              </i-col>
              <i-col span="12" style="text-align:right;">
                <Button icon="md-download" @click="download${aggregate.largeCamelName}Excel">下载Excel</Button>
              </i-col>
            </Row>
            <Row v-show="${aggregate.camelName}Query.drop">
<#list aggregate.searchFields as field>
<#if field.extend==true>
              <i-col span="3">
                <FormItem prop="${field.camelName}">
<#if field.type=='date'>
                  <Date-picker
                    type="date"
                    v-model="${aggregate.camelName}Query.form.${field.camelName}"
                    clearable
                    placeholder="${field.desc}"
                  ></Date-picker>
<#elseif field.name?contains('type') && field.name?contains('status')>
                  <Select placeholder="${field.desc}" v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable>
                    <Option value="1">xxx</Option>
                    <Option value="2">xxx</Option>
                  </Select>
<#elseif field.name?contains('is_')>
                  <div class="ivu-input ivu-input-checkbox">
                    <Checkbox
                      size="large"
                      v-model="${aggregate.camelName}Query.form.${field.camelName}"
                      :true-value="1"
                      :false-value="0"
                    >${field.desc}</Checkbox>
                  </div>
<#else>
                  <Input v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable placeholder="${field.desc}"></Input>	
</#if>
                </FormItem>
              </i-col>
</#if>
</#list>
            </Row>
          </Form>
        </div>
</#if>
      </div>
      <Table
        border
        :columns="${aggregate.camelName}Query.columns"
        :data="${aggregate.camelName}Query.data"
        ref="${aggregate.camelName}Table"
        :loading="${aggregate.camelName}Query.loading"
        v-table-scroll
        class="ivu-table-wrapper-noborder ivu-table-hidden"
        :height="tableHeight"
        highlight-row
      ></Table>
      <div ref="tableBottom">
        <div class="ivu-table-extends">
<#if (aggregate.statisticFields?size>0)>        
        	{{${aggregate.camelName}Query.total.count}} 条<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>记录.<#list aggregate.statisticFields as field><#if field.type=='bigdecimal'>${field.desc}：{{${aggregate.camelName}Query.total.${field.camelName}}} 元.<#else>${field.desc}：{{${aggregate.camelName}Query.total.${field.camelName}}} 条.</#if></#list>
<#else>
        	{{${aggregate.camelName}Query.total}} 条记录。
</#if>
        </div>
        <div class="es-list-page">
          <Page
            :current="${aggregate.camelName}Query.form.pageNo"
            :page-size="${aggregate.camelName}Query.form.pageSize"
<#if (aggregate.statisticFields?size>0)>
            :total="${aggregate.camelName}Query.total.count"
<#else>
            :total="${aggregate.camelName}Query.total"
</#if>
            @on-change="change${aggregate.largeCamelName}Page"
          />
        </div>
      </div>
    </template>
  </page>
</template> 

<script>
import {
  remote${aggregate.largeCamelName}QueryList,
  remote${aggregate.largeCamelName}DownloadFile
} from "@/api/clean/${domain.system}";
import page from "@components/page/page.vue";
import tabMixin from "@mixins/tab.js";
import pageMixin from "@mixins/page.js";

export default {
  mixins: [tabMixin, pageMixin],
  components: {
    page
  },
  data() {
    return {
      mainName: "<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>",
      ${aggregate.camelName}Query: {
        drop: false,
        loading: false,
        form: {
          pageNo: 1,
          pageSize: 20,
<#list aggregate.searchFields as field>
          ${field.camelName}: null,
</#list>
        },
        data: [],
<#if (aggregate.statisticFields?size>0)>
        total: {
			count: 0,
<#list aggregate.statisticFields as field>
<#if field.type=='bigdecimal'>
			${field.camelName}: '0.00',
<#else>
			${field.camelName}: 0,
</#if>
</#list>	
        },
<#else>
        total: 0,
</#if>
        columns: [
<#list aggregate.fields as field>
<#if field.type!='bigdecimal'>
          {
            title: "${field.desc}",
            key: "${field.camelName}",
            width: 200,
          },
<#else>
          {
            title: "${field.desc}",
            key: "${field.camelName}",
            width: 200,
            render: (h, params) => {
              return h("div", [h("span", params.row.${field.camelName} ? params.row.${field.camelName}.toFixed(2) : "0.00";)]);
            }
          },
</#if>
</#list>
          {
            title: "操作",
            key: "action",
            width: 150,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                      }
                    }
                  },
                  "查看详情"
                )
              ]);
            }  
          }
        ]
      }
    };
  },
  mounted() {
    this.init${aggregate.largeCamelName}List();
  },
  methods: {
    init${aggregate.largeCamelName}List: function() {
      // 1 初始化<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>列表
      this.${aggregate.camelName}Query.loading = true;
      remote${aggregate.largeCamelName}QueryList(this.${aggregate.camelName}Query.form).then(res => {
        this.${aggregate.camelName}Query.loading = false;
        if (res.code != 10000) {
          this.$Message.error(res.msg);
          return;
        }
        this.${aggregate.camelName}Query.data = res.data.rows;
<#if (aggregate.statisticFields?size>0)>
        this.${aggregate.camelName}Query.total = {
			count: res.data.total,
<#list aggregate.statisticFields as field>
			${field.camelName}: res.data.total${field.largeCamelName},
</#list>
        };
<#else>
        this.${aggregate.camelName}Query.total = res.data.total
</#if>
      });
    },
    clear${aggregate.largeCamelName}QueryForm: function() {
      // 2 清除查询条件
      this.$refs.${aggregate.camelName}QueryForm.resetFields();
    },
    search${aggregate.largeCamelName}: function() {
      // 3 查询<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>
      this.${aggregate.camelName}Query.form.pageNo = 1;
      this.init${aggregate.largeCamelName}List();
    },
    chang${aggregate.largeCamelName}Query1Drop: function() {
      // 4 修改查询模式 高级 精简
      this.${aggregate.camelName}Query.drop = !this.${aggregate.camelName}Query.drop;
    },
    change${aggregate.largeCamelName}Page: function(pageNo) {
      // 5 切换<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>分页
      this.${aggregate.camelName}Query.form.pageNo = pageNo;
      this.init${aggregate.largeCamelName}List();
    },
    download${aggregate.largeCamelName}Excel: function() {
      // 6 下载<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>文件
      remote${aggregate.largeCamelName}DownloadFile(this.${aggregate.camelName}Query.form).then(res => {
        if (res.code != 10000) {
          this.$Message.error("下载Excel文件失败!");
          return;
        }
        let url = res.data;
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        document.body.appendChild(link);
        link.click();
      });
    }
  }
};
</script>